<template>
  <div class="SubMenu midfont" id="SubMenu">
    <div class ="flex">
      <div v-for="(v,k) in menu" class="flex-item" :class="activeindex==k?'active':''" @click="setActive(k)">{{v.chname}}</div>
    </div>
    <div class="processCon">
      <div class="process" :style="processStyle"></div>
    </div>
  </div>
</template>
<script>
module.exports={
  data(){
    return {
      activeindex:0,
      menu:[
        {routename:"Work",chname:"作品"},
        {routename:"OnSale",chname:"在售"},
        {routename:"Article",chname:"文章"},
        {routename:"ActiveAction",chname:"动态"},
        {routename:"Spreadtrum",chname:"展讯"}
      ]
    }
  },
  computed:{
    processStyle(){
      let _this = this
      let process_width_percent = 2/3
      let bw = document.body.clientWidth
      let menuitem_count = _this.menu.length
      if(menuitem_count==0)return {}
      let index  = _this.getActiveIndex()
      let process_width = (bw/menuitem_count)* process_width_percent
      let translateX= (bw/menuitem_count)*index+ (bw/menuitem_count)*(1-process_width_percent)/2
      return {
        display:"block",
        width:process_width+'px',
        height:".1rem",
        background: "#00d6d6",
        transform:"translateX("+translateX+"px)"
      }
    }
  },
  methods:{
    prev(){
      let _this = this
      let index = _this.activeindex
      if (index==0)return false;
      console.log("prev")
      this.setActive(--index)
    },
    next(){
      let _this = this
      let index = _this.activeindex
      if (index>=_this.menu.length-1)return false;
      console.log("next")
      this.setActive(++index)
    },
    setActive(index){
      if (index==this.getActiveIndex())return false;
      let _this = this
      _this.activeindex = index
      _this.$router.replace({name:_this.menu[index].routename})
    },
    initActiveIndex(){
      this.activeindex = this.getActiveIndex()
    },
    getActiveIndex(){
      let _this = this
      let routename = this.$route.name
      for (k in _this.menu){
        if (_this.menu[k].routename==routename){
          return k
        }
      }
    }
  },
  mounted() {
    let _this = this
    _this.$nextTick(function(){
      _this.initActiveIndex()
    })
  }
}
</script>
<style scoped>
#SubMenu{padding:.3rem 0}
.flex-item:nth-child(1){border-left: 0}
.flex-item{box-sizing: border-box;border-left: 0;}
.active{color: #00d6d6}
.processCon{margin-top: .1rem;border-bottom: 1px solid lightgrey}
.process{transition-duration:.3s;transition-timing-function: ease-in-out}
</style>
